When players were asked what new features they'd like to see in Paint Mode, they replied "Masking!". We already had Automasking, which was very helpful in painting separate parts of units without wasting time. Then our amazing engineer Carolyn implemented Masking Palette. That allowed users to paint custom masks with Masking Liquid, and then remove them manually, using the Mask Remover. But what about people who didn't have a steady hand or wanted to save time?
Example of Masking Liquid and Mask Remover application
The simplest solution appeared to be adding a marquee selection tool or similar to make the process more precise and automated. However, we faced time constraints, and this task would have taken too much time. Considering the product design perspective, we had to remember Paint Mode's principal characteristics: it needed to look approachable for everyone and mimic real miniature painting as much as possible. A marquee selection would have had added complexity, cluttering the UI and breaking the connection with minipaiting as a physical hobby.
Ultimately, these constraints worked to our advantage, as we'd been able to build on the existing tech and UI solutions to create a completely new feature. We looked at what we already had in the game and adopted real-life minipainting techniques, leading to the development of Stencils.
The tech was nearly there, as Decals (Stickers) had been in the game for a long while, so they had been thoroughly tested and debugged. Carolyn took the framework and added the key masking component to create Stencils. It worked very well right away, and my feedback was purely cosmetic.
Decals in Paint Mode
I think that we managed to make the way Stencil Decals work to be in line with the "approachable and as real as possible" thinking. This is because masking tape and physical stencils are commonly used tools within the mini-painting community. In Moonbreaker, the process is very straightforward: select a shape from the panel, adjust its scale and placement on the unit, and then apply it. At this stage, you'll notice the texture transition from the image to mask. Next, you can fill the shape with any colour using brushes. Additionally, you have the option to manually edit the mask using Masking Paint and Mask Remover. Finally, there's a button to remove the mask entirely once you've finished working with it.
From the very beginning, I knew that basic shapes like square, circle and triangle absolutely had to be included. These shapes are very versatile, and while they can be painted by hand (I'd been doing it myself regularly in Paint Mode), stencils reduced this tedious and time-consuming process to just a couple of clicks. Additionally, I was hopeful that these designs would support the creative freedom of folks with movement restrictions or involuntary movement disorders.
While simple geometric shapes are highly practical, I believed that we needed to add something really fun as well. After looking at real-life stencils and coming up with a few potential designs worth exploring, I reached out to the team focused on Paint Mode to share their ideas. We also invited the Moonbreaker's Discord community to contribute.
Next, I delved into the project to make sure I understood precisely what type of files I needed and how to set them up correctly in Unity. Luckily, the structure was straightforward, allowing me to confidently follow the placeholder images setup. The overall task was simple - basically to create a bunch of .png images with transparency mask in the alpha channel.
There was one challenge to overcome though. The .png image used for masking was the very same image players would see in the UI. This solution was very quick and effective on the back-end, but made the task a bit more complex for me going forward.
The following might be a bit controversial, but I didn't really like the idea of using Photoshop for this task. While some of its features are of course convenient, there's definitely room for improvement, particularly in working with channels as well as workflow around export, and the overall lack of flexibility in the Layers structure.
Based on my experience with UV resolution of characters' models in Moonbreaker, I (rightly) suspected that working on Stencil Decals might involve a lot of going back and forth between whatever program I choose and Unity. I needed a pipeline to easily create seamless patterns like snake skin or camo, tweak the main texture repeatedly, and overwrite files without too much hassle. I decided to do something that at first may look like a bit of an overkill, but I went for one of my favourite programs - Substance Designer.
Creating tileable textures of scales, snake skin and camouflage wasn't super complicated per se. Fine-tuning the size of details, however, involved countless exports and testing in game view in Unity. I had to find a Goldilocks solution that would look and work well even on smaller UV islands of the models; otherwise, the final mask would have been very pixilated, and shapes illegible. I think I managed to adjust the scale of these patterns quite well; however, some level of pixilation appearing here and there was unavoidable, given the resolution imbalance.
I used Affinity Designer to create basic shapes, as it's much more time-effective to use vectors in this case. Graphics also needed some tweaking and re-importing. Therefore, I linked the exported .png images to my .sbs file and sorted the patterns into separate graphs to save time.
The last thing that I needed to do was the texture image that would appear in the UI and on the unit before the stencil turns into a mask. As the .png used to create a mask was the very same image that appeared in the UI, I had very little (if any) wiggle room. I tried two different approaches and asked the team for feedback. Ultimately, we decided to make Stencils look very similar to the overall UI design, especially the buttons. It came with its own problems that I had to solve; however, it made perfect sense from the user's point of view.
I couldn't change the shape of the Stencil "buttons" because, as much as I wanted to round the corners, it would have been visible in the mask later on. I could only adjust the colours of the texture to blend well with the rest of the UI as much as possible. After a few tries, I also realised that adding inner outlines wasn't really possible; I didn't find any solution that wouldn't obscure the readability of the shapes, especially with more complex ones like Hatching or Screentone.
I think that working on this task in Substance Designer was a very good decision. Creating the detailed patterns and making the texture felt very natural (obviously), and I would have opted for Substance Designer to make them regardless. I was also able to import external files, organise everything well and export all my files with ease, which came in handy while dealing with technical challenges and a tight deadline.
Overall, creating the front-facing chunk of this feature for Moonbreaker was an interesting challenge. It's also a good example of turning limitations into hints, not roadblocks.
For more examples of using Stencils while painting, please visit my portfolio page.
